﻿<section class="breadcrumb-blog-version-one">
    <div class="single-bredcurms" style="background-image:url('/images/tourism_background.jpg');">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <div class="bredcrums-content">
                        <h2>路线详情</h2>
                        <ul>
                            <li><a href="/tourism/route">路线</a>
                            </li>
                            <li class="active"><a href="#">路线详情</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section><!-- blog breadcrumb version one end here -->
<div id="routeDetailVue">
    <section class="section-paddings single-package-area">
        <div class="container">
            <div class="row">
                <!-- single package tab with details -->
                <div class="col-md-8 col-sm-12">
                    <div class="single-package-details">
                        <div class="single-package-title">
                            <h2>{{ route.title }}</h2>
                        </div>
                        <ul class="package-content d-flex justify-content-between">
                            <li>{{route.days}} 天, {{route.days - 1}} 晚</li>
                            <li>
                                <span>
                                    <i class="fa fa-star" v-for="j in route.level"></i>
                               </span>
                            </li>
                        </ul>
                    </div><!-- tab menu strat -->
                    <div class="package_banner">
                        <img v-bind:src="cover" alt="" class="img-fluid">
                    </div>
                    <div class="package-tab-menu">
                        <ul class="package-tab-menu nav nav-tabs" id="myTab2" role="tablist">
                            <li role="presentation"><a href="#description" class="active" aria-controls="description"
                                                       role="tab" data-toggle="tab">产品卖点</a></li>
                            <li role="presentation"><a href="#itinerary" aria-controls="itinerary" role="tab"
                                                       data-toggle="tab">流程</a></li>
                            <li role="presentation"><a href="#video" aria-controls="video" role="tab" data-toggle="tab">图片展示</a>
                            </li>
                            <li role="presentation"><a href="#tourWarning" aria-controls="reviews" role="tab"
                                                       data-toggle="tab">预订须知</a>
                            </li>
                            <li role="presentation"><a href="#reviews" aria-controls="reviews" role="tab"
                                                       data-toggle="tab">评价</a>
                            </li>
                        </ul>
                    </div><!-- tab menu end -->

                    <!-- tab content start -->
                    <div class="row">
                        <!-- tabs content -->
                        <div class="tab-content">
                            <div role="tabpanel" class="tab-pane fade show active in" id="description">
                                <div class="row">
                                    <!-- left content -->
                                    <div class="col-md-12 col-sm-12">
                                        <div class="tour-description">
                                            <p>{{route.introduction}}.</p>
                                        </div>
                                        <div class="chosse-packge">

                                            <div class="row">
                                                <div class="col-12 col-md-12 col-sm-12">
                                                    <div class="packaging_contents_wrapper">
                                                        <h4>路线信息</h4>
                                                        <div class="packaging-contents">
                                                            <ul class="list-unstyled">
                                                                <li><span><i
                                                                        class="fa fa-map-marker"></i>出发地</span><span>{{route.startPoint}}</span>
                                                                </li>
                                                                <li><span><i class="fa fa-clock-o"></i>旅行时间</span><span>{{route.days}} 天</span>
                                                                </li>
                                                                <li><span><i
                                                                        class="fa fa-user"></i>最低年龄</span><span>12+</span>
                                                                </li>
                                                                <li><span><i
                                                                        class="fa fa-users"></i>最大人数</span><span>{{route.max_people}}</span>
                                                                </li>
                                                            </ul>
                                                            <ul class="list-unstyled">
                                                                <li><span><i
                                                                        class="fa fa-plane"></i>到达地</span><span>{{route.terminalPoint}}</span>
                                                                </li>
                                                                <li><span><i
                                                                        class="fa fa-calendar-check-o"></i>出发日期</span><span>{{route.startDate}}</span>
                                                                </li>
                                                                <li><span><i
                                                                        class="fa fa-calendar-minus-o"></i>结束日期</span><span>{{route.terminalDate}}</span>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                    <div id="a_map"
                                                         style=" left: 0px; top: 0px; z-index: 9; overflow: hidden; user-select: none; width: 700px; height: 400px;margin: auto">
                                                    </div>
                                                    <div id="panel"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div><!-- left-content -->

                                </div>
                            </div>

                            <div role="tabpanel" class="tab-pane fade" id="itinerary">
                                <div class="row">
                                    <div class="col-md-12 col-sm-12">
                                        <div class="tour-description">
                                            <h4>旅游路线详解</h4>
                                            <div class="main-timeline">
                                                <!-- single timeline -->
                                                <div class="timeline" v-for="process in route.processes">
                                                    <div class="timeline-content left">
                                                        <span class="timeline-icon">{{process.day}}</span>
                                                        <h4>Day {{process.day}}: {{process.process}}</h4>
                                                        <p>{{process.detail}}</p>
                                                    </div>
                                                </div><!-- single timeline -->
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- video tab content start -->
                            <div role="tabpanel" class="tab-pane fade" id="video">
                                <div class="row">
                                    <div class="col-12 col-md-12 col-sm-12">
                                        <div class="tour-description">
                                            <div v-for="(item,index) in route.tourismImage">
                                                <img  v-if="index > 0" v-bind:src="item.url">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div><!-- video tab content end -->

                            <div role="tabpanel" class="tab-pane fade" id="tourWarning">
                                <div class="row">
                                    <!-- left content -->
                                    <div class="col-md-12 col-sm-12">
                                        <div class="tour-description">
                                            <p>
                                            <h3>预订须知</h3>
                                            <div class="Diamond_item_text">本产品由本公司招徕，委托社为{{route.user.userName}}，具体的旅游服务和操作由委托社提供。<a
                                                    href="//pages.ctrip.com/commerce/vacations/new_knowledge/index.html#/1"
                                                    target="_blank">网上预订须知</a></div>
                                            <br>
                                            <div>
                                                违约条款
                                                <ul>
                                                    <li>旅行社违约：</li>
                                                    <li>旅行社向旅游者退还已收取的全部旅游费用，并按下列标准向旅游者支付违约金：</li>
                                                </ul>
                                                <br>
                                                <table class="table table-bordered">
                                                    <thead>
                                                    <tr>
                                                        <th scope="col">行程前</th>
                                                        <th scope="col">违约金</th>
                                                    </tr>
                                                    </thead>
                                                    <tbody>
                                                    <tr>
                                                        <td>行程前3-1日</td>
                                                        <td>20%</td>
                                                    </tr>
                                                    <tr>
                                                        <td>行程前6-4日</td>
                                                        <td>40%</td>
                                                    </tr>
                                                    <tr>
                                                        <td>行程开始当日</td>
                                                        <td>60%</td>
                                                    </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                            </p>
                                        </div>
                                    </div><!-- left-content -->

                                </div>
                            </div>


                            <div role="tabpanel" class="tab-pane fade" id="reviews">
                                <div class="row">
                                    <div class="col-md-12 col-sm-12">
                                        <div class="tour-description">
                                            <div class="comment-list-items">
                                                <div class="comment-list-wrapper"
                                                     v-for="routeEvaluation in route.routeEvaluations">
                                                    <div class="comment-list">
                                                        <div class="commnet_img">
                                                            <img v-bind:src="routeEvaluation.user.userImage"
                                                                 alt="member img"
                                                                 class="img-fluid">
                                                        </div>
                                                        <div class="comment-text">
                                                            <div class="author_info">
                                                                <div class="author_name">
                                                                    <a href=""
                                                                       class="">{{routeEvaluation.user.userName}}</a>
                                                                    <span>routeEvaluation.time</span>
                                                                </div>
                                                                <div class="reply-comment">
                                                                    <a href="#" title=""> <i
                                                                            class="flaticon-reply-arrow"></i> Reply</a>
                                                                </div>
                                                            </div>
                                                            <ul class="review_rating d-flex">
                                                                <li v-for="j in routeEvaluation.star"><i
                                                                        class="fa fa-star"></i></li>
                                                            </ul>
                                                            <p>{{routeEvaluation.message}}</p>
                                                        </div>
                                                    </div>

                                                    <div class="comment-list reply_comment_text"
                                                         v-for="comment in routeEvaluation.comments">
                                                        <div class="commnet_img">
                                                            <img v-bind:src="comment.user.userImage" alt="member img"
                                                                 class="img-fluid">
                                                        </div>
                                                        <div class="comment-text">
                                                            <div class="author_info">
                                                                <div class="author_name">
                                                                    <a href="" class="">{{comment.user.userName}}</a>
                                                                    <span>{{comment.time}}</span>
                                                                </div>
                                                                <div class="reply-comment">
                                                                    <a href="#" title=""> <i
                                                                            class="flaticon-reply-arrow"></i> Reply</a>
                                                                </div>
                                                            </div>
                                                            <ul class="review_rating d-flex">
                                                                <li v-for="k in comment.star"><i class="fa fa-star"></i>
                                                                </li>
                                                            </ul>
                                                            <p>{{comment.message}}</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div><!-- video tab content end -->
                        </div><!-- tabs content-->
                    </div><!-- tab content end -->
                </div><!-- single package tab with details -->

                <!-- booking form start here -->
                <div class="col-md-4 col-sm-12">
                    <aside>
                        <div class="booking-form">
                            <div class="booking-title">
                                <h2>Book This Tour</h2>
                                <p>Lorem ipsum dolor sit amet, consectet ur adipiscing elit, sedpr do eiusmod tempor
                                    incididunt ut.</p>
                            </div>
                            <div id="calendar"></div>
                        </div>
                    </aside><!-- adverestment start here-->

                    <div class="adding-form">
                        <div class="addfor-bg">
                            <div class="add-content">
                                <h3>详情咨询</h3>
                                <p>如果您有任何疑问想咨询的话，请按照下方的联系方式联系我们</p>
                                <ul class="contact-for-add">
                                    <li><img src="/reception/images/icon/phone.png" alt="">{{route.user.userPhone}}</li>
                                    <li><img src="/reception/images/icon/gmail.png" alt="">{{route.user.userEmail}}</li>
                                </ul>
                            </div>
                        </div>
                    </div><!-- adverestment start here-->
                </div><!-- booking form end here -->
            </div>
        </div>
    </section>
    <!-- realted tour start here -->
    <section class="related-tour popular-packages">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <div class="section-title-3 mbt-100">
                        <h2>猜您喜欢</h2>
                    </div>
                </div>
            </div>
            <div class="row">
                <!-- single package start -->
                <div class="col-12 col-sm-6 col-md-6 col-lg-4" v-for="r in routes">
                    <div class="single-package">
                        <div class="package-image">
                            <a href="#"><img v-bind:src="r.tourismImage[0].url" alt="">
                            </a>
                        </div>
                        <div class="package-content">
                            <h3><a href="" title="">{{r.title}}</a></h3>
                            <p>{{r.days}} 天, {{r.days - 1}} 夜 <span>￥{{r.price}}</span>
                            </p>
                        </div>
                        <div class="package-calto-action">
                            <ul class="ct-action">
                                <li><a href="#" class="travel-booking-btn hvr-shutter-out-horizontal">Book Now</a>
                                </li>
                                <li>
                                    <i class="fa fa-star" v-for="l in r.level"></i>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div><!-- single package end -->
            </div>
        </div>
    </section>
</div>
<!-- ============================
        JavaScript Files
============================= -->

<!-- jquery latest version -->
<script src="/reception/js/vendor/jquery-3.2.0.min.js"></script>
<script src="/reception/js/vendor/modernizr-2.8.3.min.js"></script>
<!-- bootstrap js -->
<script src="/reception/js/bootstrap.min.js"></script>
<!-- owl.carousel js -->
<script src="/reception/js/owl.carousel.min.js"></script>
<!-- slick js -->
<script src="/reception/js/slick.min.js"></script>
<!-- meanmenu js -->
<script src="/reception/js/jquery.meanmenu.min.js"></script>
<!-- jquery-ui js -->
<script src="/reception/js/jquery-ui.min.js"></script>
<!-- wow js -->
<script src="/reception/js/wow.min.js"></script>
<!-- counter js -->
<script src="/reception/js/jquery.counterup.min.js"></script>
<!-- Countdown js -->
<script src="/reception/js/jquery.countdown.min.js"></script>
<!-- waypoints js -->
<script src="/reception/js/jquery.waypoints.min.js"></script>
<!-- Isotope js -->
<script src="/reception/js/isotope.pkgd.min.js"></script>
<!-- magnific js -->
<script src="/reception/js/jquery.magnific-popup.min.js"></script>
<!-- Image loaded js -->
<script src="/reception/js/imagesloaded.pkgd.min.js"></script>
<!-- chossen js -->
<script src="/reception/js/chosen.jquery.min.js"></script>
<!-- Jquery plugin -->
<script src="/reception/js/plugins.js"></script>
<!-- select2 js plugin -->
<script src="/reception/js/select2.min.js"></script>
<script src="/reception/js/colors.js"></script>
<!-- Jquery plugin -->
<script src="/reception/js/jquery-customselect.js"></script>
<script type="/text/javascript" src="js/plugins/fullcalendar.min.js"></script>
<!-- main js -->
<script src="/reception/js/custom.js"></script>
<!-- Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- Map -->
<style>
    body, html {
        margin: 0;
        padding: 0;
        font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
        width: 100%;
        height: 100%
    }

    .a_map {
        width: 100%;
        height: 100%;
    }

    #panel {
        position: fixed;
        background-color: white;
        max-height: 90%;
        overflow-y: auto;
        top: 10px;
        right: 10px;
        width: 280px;
    }

    #panel .amap-lib-driving {
        display: none;
        border-radius: 4px;
        overflow: hidden;
    }
</style>
<script type="text/javascript"
        src="//webapi.amap.com/maps?v=2.0&key=fa89861b3f18b12b40dd4d9b828090bc&plugin=AMap.ControlBar,AMap.ToolBar,AMap.Driving,"></script>

<script type="text/javascript">
    var routeDetailVue = new Vue({
        el: "#routeDetailVue",
        data: {
            cover: "",
            routes: [],
            route: {
                id: 0,
                title: "",
                introduction: "",
                startPoint: "",
                viaPoint: [],
                terminalPoint: "",
                startDate: "",
                terminalDate: "",
                type: "",
                price: "",
                level: "",
                user: {
                    userName: "",
                    userPhone: "",
                    userEmail: ""
                },
                max_people: 0,
                tourismImage: [],
                processes: [],
                days: 0
            },
            routeSearchBean: {
                currentPage: 1,
                pageSize: 3,
                orderBy: "",
                direction: "",
                keyword: "",
                startPoint: "",
                terminalPoint: "",
                startDate: "",
                terminalDate: "",
                type: "",
                maxPrice: "",
                minPrice: "",
                level: "",
                maxPeople: "",
            },
            routeEvaluation: {
                uid: 0,
                time: "",
                message: "",
                star: "",
                fkUserId: 0,
                fkRouteId: 0,
            }
        },
        methods: {
            initRouteDetail: function () {
                var routeId = sessionStorage.getItem("routeId");
                var self = this;
                $.ajax({
                    async: false,
                    type: "GET",
                    url: "/api/route/" + routeId,
                    dataType: "json",
                    success: function (data) {
                        var startDate = new Date(data.startDate).getTime();
                        var terminalDate = new Date(data.terminalDate).getTime();
                        data.days = (terminalDate - startDate) / (1000 * 60 * 60 * 24);
                        data.level = parseInt(data.level);
                        data.startDate = /\d{4}-\d{1,2}-\d{1,2}/g.exec(data.startDate)[0];
                        data.terminalDate = /\d{4}-\d{1,2}-\d{1,2}/g.exec(data.terminalDate)[0];
                        self.route = data;
                        self.cover = self.route.tourismImage[0].url;
                    },
                    error: function (rs) {
                        console.log(rs)
                    }
                })

                self.routeSearchBean.startPoint = self.route.startPoint;
                $.ajax({
                    async: false,
                    type: "POST",
                    url: "/api/routes",
                    contentType: "application/json",
                    dataType: "json",
                    data: JSON.stringify(self.routeSearchBean),
                    success: function (rs) {
                        for (var i = 0; i < rs.list.length; i++) {
                            var startDate = new Date(rs.list[i].startDate).getTime();
                            var terminalDate = new Date(rs.list[i].terminalDate).getTime();
                            rs.list[i].days = (terminalDate - startDate) / (1000 * 60 * 60 * 24);
                            rs.list[i].level = parseInt(rs.list[i].level);
                        }
                        self.routes = rs.list
                    },
                    error: function (rs) {
                        console.log(rs)
                    }
                })
                var map = new AMap.Map('a_map', {
                    rotateEnable: true,
                    pitchEnable: true,
                    zoom: 10,
                    pitch: 50,
                    rotation: -15,
                    viewMode: '3D', //开启3D视图,默认为关闭
                    zooms: [2, 20],
                });

                var controlBar = new AMap.ControlBar({
                    position: {
                        right: '10px',
                        top: '10px'
                    }
                });
                controlBar.addTo(map);

                var toolBar = new AMap.ToolBar({
                    position: {
                        right: '40px',
                        top: '110px'
                    }
                });
                toolBar.addTo(map);

                var driving = new AMap.Driving({
                    map: map,
                    panel: "panel"
                });
                var points = [{keyword: this.route.startPoint, city: this.route.startPoint}]
                $.each(this.route.viaPoint, function (index, v) {
                    points.push({keyword: v.name, city: v.name})
                })
                points.push({keyword: this.route.terminalPoint, city: this.route.terminalPoint})
                // 根据起终点经纬度规划驾车导航路线
                driving.search(points, function (status, result) {
                        // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
                        if (status === 'complete') {
                            console.log('绘制驾车路线完成')
                        } else {
                            console.log('获取驾车数据失败：' + result)
                        }
                    })
            },
        },
        created: function () {

        },
        mounted: function () {
            this.initRouteDetail();
        }
    })
</script>
